<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="06_eventMousePosition.js"></script>
<style>
html * {
	margin: 0;
	padding: 0;
}

body span {
	color: red;
	font-size: 30px;
}

#wrapper {
	width: 3000px;
	height: 3000px;
}

#box {
	width: 400px;
	height: 400px;
	border: 2px solid blue;
	margin-left: 300px;
	margin-top: 100px;
	position: fixed;
}

#box>p {
	margin-top: 60px;
	margin-left: 150px;
}

p>span {
	margin: 0;
}
</style>


<div id="wrapper">
	<div id="box">
		<p>
			clientX = <span id="clientx">0</span><br> 
			clientY = <span id="clienty">0</span><br> 
			offsetX = <span id="offsetx">0</span><br> 
			offsetY = <span id="offsety">0</span><br> 
			pageX = <span id="pagex">0</span><br> 
			pageY = <span id="pagey">0</span><br> 
			screenX = <span	id="screenx">0</span><br> 
			screenY = <span id="screeny">0</span>
		</p>
	</div>
</div>

